<!-- 员工学习情况列表 -->
<template>
  <!-- 用户列表 -->
  <div class="card_user">
    <div
      class="card_user_item flex"
      v-for="(user, index) in list"
      :key="index"
      @click="toStudyDetail(user)"
    >
      <!-- 头像 -->
      <image
        class="avatar"
        :src="
          user.avatar
            ? user.avatar
            : require('.../../static/images/avatar_default.png')
        "
      />
      <!-- 用户右边数据 -->
      <div class="card_user_item_right">
        <!-- 基本信息 -->
        <div class="item_info flexbet">
          <div class="item_info_left flex">
            <div class="flex">
              <div class="name overtxt">{{ user.name }}</div>
              <image
                class="sex"
                :src="
                  user.sex == 1
                    ? require('../static/images/teaching/women.png')
                    : require('../static/images/teaching/man.png')
                "
              ></image>
            </div>
            <div class="chaptername">
              {{
                user.chapter &&
                user.chapter !== undefined &&
                user.chapter !== null
                  ? user.chapter
                  : "--"
              }}
            </div>
            <div class="taskname">
              {{
                user.task && user.task !== undefined && user.task !== null
                  ? user.task
                  : "--"
              }}
            </div>
          </div>
          <div
            v-if="user.examPaperId"
            class="item_info_right flex"
            @click.stop="toCorrect(user)"
          >
            <div class="tip">去批改</div>
            <image class="to" src="/static/images/teaching/to.png"></image>
          </div>
        </div>
        <!-- 进度条 -->
        <div class="progressbox flex">
          <div class="progress rela">
            <div
              :style="{ width: user.progressRate }"
              class="progress_bar abso"
            ></div>
          </div>
          <div class="value">{{ user.progressRate }}</div>
        </div>
      </div>
    </div>
    <div style="height: 20rpx"></div>
  </div>
</template>
<script>
import { orderCourseStudentList } from "@/common/api/teachingRecord";
export default {
  data() {
    return {
      active: 0,
      safeAreaInsetsTop: "",
      navigationBarHeight: "",
      h: "",
      list: [],
      orderCourseId: "",
    };
  },
  watch: {},
  onLoad(options) {
    if (options.orderCourseId) {
      this.orderCourseId = options.orderCourseId;
    }
    uni.setNavigationBarTitle({
      title: options.courseName,
    });
  },
  onShow() {
    this.getList();
  },

  methods: {
    /* 获取卡片列表 */
    async getList() {
      uni.showLoading({ mask: true, title: "加载中" });
      let res = await orderCourseStudentList(this.orderCourseId);
      this.list = res.data;
    },
    /* 去批改 */
    toCorrect(user) {
      uni.navigateTo({
        url: `/pages/selectiCourse/exam?courseStuId=${user.courseStuId}&paperId=${user.examPaperId}&type=onlineExam&status=correct`,
      });
    },
    /* 去员工学习详情 */
    toStudyDetail(user) {
      uni.navigateTo({
        url: `/pages_teaching/studentStudyDetail?courseStuId=${user.courseStuId}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.card_user {
  box-sizing: border-box;
  padding: 32rpx 32rpx 0 32rpx;
  min-height: 100vh;
  background: #f6f7f8;
  .card_user_item:last-of-type {
    margin-bottom: 0rpx;
  }
  .card_user_item {
    margin-bottom: 20rpx;
    width: 696rpx;
    background: white;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 24rpx 24rpx 20rpx 24rpx;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 32rpx;
      margin-right: 16rpx;
    }
    //  用户右边数据
    .card_user_item_right {
      flex: 1;
      //  基本信息
      .item_info {
        .item_info_left {
          width: 400rpx;
          .name {
            max-width: 300rpx;
            font-size: 30rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 42rpx;
          }
          .sex {
            width: 24rpx;
            height: 24rpx;
            margin: 8rpx 0 0 16rpx;
          }
          .chaptername {
            width: 400rpx;
            margin-top: 16rpx;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 34rpx;
          }
          .taskname {
            width: 400rpx;
            margin-top: 8rpx;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 34rpx;
          }
        }
        .item_info_right {
          margin-top: 26rpx;
          .tip {
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 34rpx;
          }
          .to {
            margin-left: 16rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
      //  进度条
      .progressbox {
        .progress {
          margin-top: 30rpx;
          width: 220rpx;
          height: 8rpx;
          background: #ebebeb;
          border-radius: 6rpx;
          .progress_bar {
            top: 0;
            left: 0;
            height: 8rpx;
            background: linear-gradient(270deg, #f76b1c 0%, #fad961 100%);
            border-radius: 6rpx;
          }
        }
        .value {
          margin: 16rpx 0 0 20rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #f85314;
          line-height: 34rpx;
        }
      }
    }
  }
}
</style>